<template>
	<div class="top-nav">
		<div class="top-left">
			<!-- <img src="@/assets/images/main/logo_2x.png" /> -->
			<!--			<svg-icon name="logo" @click="openWebsite" />-->
			<div class="top-title" style="margin-left: 20px">{{ title }}</div>
		</div>
		<!-- <div class="top-box flex">
			<div
				v-for="i in navList"
				:key="i.name"
				class="top-box-item mx-2"
				:class="checkActive(`ai-${i.icon}`) ? 'active' : ''"
				@click="router.push(`/main/ai-${i.icon}`)"
			>
				<img :src="getImageUrl(i.icon, checkActive(`ai-${i.icon}`) ? 'on' : 'off')" alt="" />
				<div>{{ i.name }}</div>
			</div>
		</div> -->
		<div class="top-right">
			<el-dropdown popper-class="user-popper" @command="handleAvator">
				<div class="top-avatar">
					<img src="@/assets/images/main/avatar.png" alt="" />
					<div class="w-12 truncate">{{ getNickName }}</div>
					<div></div>
				</div>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item command="info">
							<img src="@img/main/user-icon-3.png" alt="" />
							<span>&nbsp;&nbsp;账号信息</span>
						</el-dropdown-item>
						<el-dropdown-item command="edit">
							<img src="@img/main/user-icon-4.png" alt="" />
							<span>&nbsp;&nbsp;修改密码</span>
						</el-dropdown-item>
						<!-- <el-dropdown-item v-if="permissionTool.checkPermission()" command="permi">
							<img src="@img/main/user-icon-1.png" alt="" />
							<span>&nbsp;&nbsp;进入后台</span>
						</el-dropdown-item> -->
						<el-dropdown-item v-if="permissionTool.checkPermission()" command="permi2">
							<img src="@img/main/user-icon-1.png" alt="" />
							<span>&nbsp;&nbsp;进入后台</span>
						</el-dropdown-item>
						<el-dropdown-item command="logout">
							<img src="@img/main/user-icon-2.png" alt="" />
							<span>&nbsp;&nbsp;退出登录</span>
						</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
	</div>
</template>

<script setup lang="ts">
import { clearToken } from "@/utils/auth";
import { usePermissionCheck } from "@/utils/hooks/useRole";
import { useUserStore } from "@/store";
const userStore = useUserStore();
const getNickName = computed(() => userStore.nickName);
const permissionTool = usePermissionCheck();
const title = BASE_CONFIG.title;
let router = useRouter();
let route = useRoute();
let navList = [
	{
		icon: "processing",
		name: "AI解译",
	},
	{
		icon: "management",
		name: "数据管理",
	},
	{
		icon: "analysis",
		name: "对比分析",
	},
];
let getImageUrl = (iconName: string, status: string) => {
	return new URL(`../../assets/images/main/${iconName}-${status}@2x.png`, import.meta.url).href;
};
// 检查页面路由，与图标相同则高亮
let checkActive = (routeName: string) => {
	let hasRoute = false;
	for (const routeItem of route.matched) {
		const path = routeItem.path;
		const dealRouteName = "/main/" + routeName;
		if (path === dealRouteName) {
			hasRoute = true;
			break;
		}
	}
	return hasRoute;
};
const handleAvator = (command: string) => {
	if (command === "permi") {
		handleEnter();
	} else if (command === "logout") {
		handleLogout();
	} else if (command === "info") {
		handleAccountInfo();
	} else if (command === "edit") {
		handleEditPassword();
	} else if (command === "permi2") {
		window.open(BASE_CONFIG.BACKEND_URL);
	}
};
const handleEditPassword = () => {
	router.push("/main/ai-processing/edit-pwd");
};
const handleAccountInfo = () => {
	router.push("/main/ai-processing/account-info");
};
const handleEnter = () => {
	router.push("/main/ai-system");
};
// 退出登录
const handleLogout = () => {
	clearToken();
	router.push("/login");
};
// 打开官网
const openWebsite = () => {
	window.open(BASE_CONFIG.website);
};
</script>

<style lang="scss" scoped>
@import "@/index.scss";

.top-nav {
	@apply fixed top-0 z-10 flex h-16 w-full justify-center text-white;
	background: linear-gradient(rgba(1, 12, 18, 0.9) 0%, rgba(4, 36, 70, 0.9) 100%);
	.top-left {
		/* 响应式 宽低于1024px隐藏 */
		@apply flex flex-1 items-center pt-2 opacity-0 xl:opacity-100;
		@apply text-2xl;
		svg {
			width: 70px;
			@apply relative z-10 ml-4 mr-10;
			cursor: pointer;
		}
		.top-title {
			@apply relative z-10;
			@include art-font(24px, #fff);
			background: linear-gradient(180deg, #ffffff 0%, #acecff 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		&::after {
			@apply fixed left-0 z-0;
			content: "";
			pointer-events: none;
			left: 6px;
			top: 5px;
			width: 412px;
			height: 75px;
			// background-image: url(@/assets/images/main/top-bg-left.png);
			background-size: 100% 100%;
		}
	}
	.top-box {
		@apply relative flex items-center justify-around;
		@include art-font(20px, #fff);
		width: 384px;
		.active {
			// text-shadow: 0 0 5px #0098ff, 0 0 10px #0098ff, 0 0 15px;
			text-shadow: 0px 0px 10px #0098ff;
			&::before {
				@apply absolute z-20;
				content: "";
				top: 43.5px;
				width: 144px;
				height: 6px;
				// background-image: url("@img/main/active-title.png");
			}
		}
		.top-box-item {
			@apply relative z-10 cursor-pointer;
			@apply flex;
			top: 2px;
			img {
				// @apply mr-2 w-8;
				width: 36px;
				height: 28px;
				margin-right: 3px;
			}
			.active-title {
				@apply absolute;
				top: 34px;
			}
			&::after {
				display: none;
				content: "";
				position: absolute;
				top: -10px;
				left: 16px;
				width: 90.5px;
				height: 51.5px;
				// background: url("../../assets/images/main/nav_hov_bg.png") center center no-repeat;
				background-size: 100% 100%;
				z-index: -1;
			}
			&:hover {
				&::after {
					display: block;
				}
			}
			::before {
				content: "";
				position: absolute;
				top: -10px;
				left: -40px;
				bottom: -10px;
				right: -40px;
			}
		}
		&::after {
			@apply fixed left-0 right-0 m-auto;
			content: "";
			pointer-events: none;
			top: 9px;
			width: 738px;
			height: 59px;
			// background-image: url(@/assets/images/main/top-bg-center.png);
			// background-image: url(@/assets/images/main/top-bg.png);
			background-size: 100% 100%;
		}
	}

	.top-right {
		@apply flex flex-1 items-center justify-end pt-2 text-sm;
		/* 下拉框样式 */

		:global(.user-popper) {
			/* 当前下拉框样式 */
			--el-bg-color-overlay: rgba(6, 19, 44, 0.8);
			--el-text-color-regular: #fff;
			--el-color-primary-light-9: rgba(7, 151, 255, 0.2);
			--el-border-color-light: #0095ff;
			--el-color-primary: #fff;
			.el-dropdown-menu {
				padding: 8px !important;
			}
		}
		.top-avatar {
			@apply relative top-20 flex cursor-pointer items-center text-white outline-none lg:top-0;
			margin-right: 24px;
			width: 124px;
			height: 40px;
			> * {
				@apply relative z-10;
			}
			> *:nth-child(1) {
				margin-left: 14px;
			}
			> *:nth-child(2) {
				margin-left: 10px;
			}
			> *:nth-child(3) {
				@apply absolute;
				margin-top: 4px;
				right: 12px;
				width: 0;
				height: 0;
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-top: 6px solid #fff; /* 这里可以改变颜色 */
			}
			&::after {
				@apply absolute z-0;
				content: "";
				pointer-events: none;
				width: 125px;
				height: 40px;
				// background-image: url(@/assets/images/main/top-bg-right.png);
				background-size: 100% 100%;
			}
		}
	}
}
</style>
